<template>
	<view class="exchange_bg">
		<view class="jui_bg_fff jui_lrtop Box jui_flex jui_flex_justify_between ">
			<view class="faq-box jui_mar_t20">
				<scroll-view class="scroll-box" scroll-y="true" @scrolltolower="loadMore">
					<view class="problem-item" v-for="(item, index) in faqList" :key="item.id" @tap="onProblem(index)">
						<view class="x-bc title-box jui_flex jui_flex_justify_between jui_flex_items_center">
							<view class="x-f jui_flex ">
								<view class="tag-box x-c ">
									<text class="serial ">{{ item.indexNum }}</text>
									<!-- <text class="triangle"></text> -->
								</view>
								<view class="title">{{ item.title }}</view>
							</view>
							<text class="cuIcon-unfold " :class="{ 'cuicon-active': item.checked }"></text>
						</view>
						<jyf-parser :html="item.content" v-if="item.checked" class="detail"></jyf-parser>
					</view>
					<shopro-empty v-if="!faqList.length" :emptyData="emptyData"></shopro-empty>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				emptyData: {
					img: '/static/imgs/home/empty_goods.png',
					tip: '暂无数据~'
				},
				faqList: [],
				loadStatus: '', //loading,over
				page: 1,
				hasMore: true
			};
		},
		onLoad() {
			this.getFaqList();
		},
		methods: {
			onProblem(index) {
				if (this.faqList[index].checked) {
					this.$set(this.faqList[index], 'checked', false);
				} else {
					this.$set(this.faqList[index], 'checked', true);
				}
			},
			// 常见问题列表、
			getFaqList() {
				let that = this;
				that.loadStatus = 'loading';
				var data = {
					page: that.page,
					psize: 10
				};
				this.$api.help(data).then(res => {
					if (res.code == 1) {
						res.data.forEach((faq, index) => {
							faq.indexNum = (index + 1).toString().padStart(2, '0');
						});
						that.faqList = [...that.faqList, ...res.data];
						// console.log(that.faqList)
						if (res.data.length != 0) {
							that.loadStatus = '';
							that.hasMore = true;
						} else {
							that.hasMore = false;
							that.loadStatus = 'over';
						}
					}
				});
			},
			// 加载更多
			loadMore() {
				if (this.hasMore) {
					this.page += 1;
					this.getFaqList();
				}
			}
		}
	};
</script>

<style lang="scss">
	page {
		background: #fff;
	}
	.exchange_bg {
		background:$zhuse;
		width: 100%;
		.Box {
			padding: 20rpx 0rpx 0 0rpx;
			flex-wrap: wrap;
		}
	}
	.faq-box {
		width: 100%;
		// background: $zhuse;
		.problem-item {
			padding: 0 20rpx;
			border-bottom: 1rpx solid rgba(#dfdfdf, 0.5);

			.title-box {
				height: 98rpx;
			}

			.detail {
				width: 631rpx;
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: rgba(99, 99, 99, 1.0);
				line-height: 48rpx;
				padding-left: 40rpx;
				padding-bottom: 40rpx;
			}

			.tag-box {
				margin-right: 20rpx;
				width: 40rpx;
				height: 40rpx;
				background: $zhuse;
				border-radius: 6rpx;
				display: flex;
				justify-content: center;
				align-items: center;

				// position: relative;
				// z-index: 6;
				// padding-left: 4rpx;
				.serial {
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #fff;
					line-height: 24rpx;
				}

				.triangle {
					position: absolute;
					z-index: 5;
					width: 10rpx;
					height: 10rpx;
					background: $zhuse;
					transform: rotate(45deg);
					bottom: -4rpx;
				}
			}

			.detail-box {
				flex: 1;

				.title {
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: rgba(51, 51, 51, 1);
				}
			}

			.cuIcon-unfold {
				transition: all ease-in-out 0.2s;
			}

			.cuicon-active {
				transform: rotate(180deg);
				transition: all ease-in-out 0.2s;
			}
		}
	}
</style>
